<script type="text/javascript" src="{{base_url()}}lib/tokeninput/jquery.tokeninput.js"></script>
<link rel="stylesheet" href="{{base_url()}}lib/tokeninput/token-input.css" type="text/css" />
<link rel="stylesheet" href="{{base_url()}}lib/tokeninput/token-input-facebook.css" type="text/css" />        
<script>
    var i=1;
    function addText()
    {
        var o=$('#listProduct').tokenInput("get");
        alert(JSON.stringify(o));
        var obj= document.getElementById('cuslist');
        var s = '<br />scrollHeight: ' + obj.scrollTop;
        document.getElementById('dm').innerHTML = s;
        obj.scrollTop = i*100;
        i++;
    }
    
    $(document).ready(function () {
        $("#CustommerGroup").change(function(){
            if($("#CustommerGroup").val()!=" -- [ Nhóm Khách Hàng ] -- "){
                var url="{{base_url()}}admin-planners/sendmail/getCustomerByGroup";
                var data={ Group: $("#CustommerGroup").val() };
                htmlAjax(url,data,$("#cuslist"));
            }
        });
        $("#listProduct").tokenInput("{{base_url()}}admin-planners/sendmail/tokenProduct", {
            resultsFormatter: function(item){ return "<li><div style='width:40px;color:#000;float:left;'>" + item.ProductID + "</div> " + item.ProductName + "</li>" },
            tokenFormatter: function(item) { return "<li>" + item.ProductName + "</li>" },
            propertyToSearch: "ProductID",
            hintText:"Nhập để tìm sản phẩm",
            minChars: 1,
            tokenLimit: 10
        });
        var theme = 'classic';
        // Create jqxButton widgets.
        $("#jqxWidget-groupbutton").jqxButtonGroup({ theme: theme, mode: 'default' });
        $("#jqxWidget-groupbutton").bind('buttonclick', function (event) {
            var clickedButton = event.args.button;
            if(clickedButton[0].id=="sendmailtest"){
                $('.sendtome').show(500,function(){ $(".txt-email-test").focus(); });
            }else if(clickedButton[0].id=="mailview"){
                $('#jqxWindow-mailview').jqxWindow('open');
                $('#jqxWindow-mailview').jqxWindow('setContent', 'Đợi chút. Đang tải...');
                var products=$('#listProduct').tokenInput("get");
                if(products.length==0){
                    $('#jqxWindow-mailview').jqxWindow('setContent', 'Bạn chưa chọn sản phẩm');
                }else{
                    var surl="{{base_url("admin-planners/sendmail/getMailcontent")}}";
                    var sdata={
                        products:products
                    };
                    htmlAjaxKU(surl,sdata,"#windowContent-mailview");
                }
            }else{
                threadsend(1);
            }
        });
        $('#jqxWindow-mailview').jqxWindow({ 
            autoOpen: false,showCollapseButton: true, maxHeight: 500, maxWidth: 700, 
            minHeight: 200, minWidth: 200, width: 520,height:400, theme: theme , isModal: true
        });
    });
    function testmail(){
        var products=$('#listProduct').tokenInput("get");
        if(!_FcheckEmail($(".txt-email-test").val())){ $(".txt-email-test").focus();return; }
        if(!_FcheckFilled($("#txt_title").val())){ $("#txt_title").focus();return; }
        if(products.length==0){
            alert('Bạn chưa chọn sản phẩm');
        }else{
            
            var surl="{{base_url("admin-planners/sendmail/TestSendMail")}}";
            var sdata={
                title:$("#txt_title").val(),
                products:products,
                email: $(".txt-email-test").val()
            };
            $("#btn-send1").html("đang gửi...");
            jqxAjax(surl,sdata,function(){
                $("#btn-send1").html("Gửi");
            });
        }
    }
    function threadshow(index){
        $(".thread").hide();
        $(".thread.t"+index).show();
        $(".threadpage span.fwb").removeClass("fwb");
        $(".threadpage span.t"+index).addClass("fwb");
    }
    function threadsend(threadindex){
        threadshow(threadindex);
        var str="";
        chkStaffBonus=$(".thread.t"+threadindex+" .chkStaffBonus");
        for(i=0;i<chkStaffBonus.length;i++)
        {
            //var chkbox = document.getElementById(chkStaffBonus[i]);
            if(chkStaffBonus[i].checked)
            {
                str+=chkStaffBonus[i].value+",";
            }
        }
        if(str!=""){
            if(!_FcheckFilled($("#txt_title").val())){ $("#txt_title").focus();return; }
            var products=$('#listProduct').tokenInput("get");
            if(products.length==0){
                alert('Bạn chưa chọn sản phẩm');
                return;
            }
            var surl="{{base_url("admin-planners/sendmail/ThreadSendMail")}}";
            var sdata={
                title:$("#txt_title").val(),
                products:products,
                listEmail: str
            };
            jqxAjax(surl,sdata,function(code){
                if(code>=0){
                    $.blockUI({ 
                        theme:     true, 
                        title:    'Thread...', 
                        message:  '<p>Đã gửi thư cho khách hàng. <br/>Thread kế tiếp sẽ bắt đầu sau 5 giây.</p>'
                    }); 
                    $(".thread.t"+threadindex+" .chkStaffBonus").replaceWith('ok');
                    if($(".thread.t"+(threadindex+1)).length>0){
                        setTimeout(function(){ threadsend(threadindex+1); },5000);
                    }else{
                        $.blockUI({ 
                            theme:     true, 
                            title:    'Thông báo', 
                            message:  '<p>Quá trình gửi thư đã hoàn tất.<br/> <a href="javascript:$.unblockUI();">Close</a></p>'
                        });
                    }
                }
            });
            
        }
        
    }
</script>

<style>.fwb{font-weight: bold}</style>
<hr style="height: 0;border: none;border-bottom: 1px solid #ccc;" />
<table style="width: 100%">
    <tr>
        <td style="vertical-align: top;">   
            Chọn Những Sản Phẩm Cần Gửi
        </td>
        <td style="vertical-align: top">
            Chọn nhóm khách hàng cần gửi mail.
        </td>
    </tr>
    <tr>
        <td style="vertical-align: top;text-align: left;width: 402px" rowspan="2">   
            <input type="text" id="listProduct" name="blah" style="width: 100%"  value=""/>
        </td>
        <td style="vertical-align: top">
            <div>
                <select id="CustommerGroup" class="fl">
                    <option>[ --- Nhóm Khách Hàng --- ]</option>
                    <option value="-1">Danh sách khách hàng đã đăng ký nhận mail</option>
                    <option value="0">Tiềm Năng</option>
                    <option value="1">Tiềm Năng I</option>
                    <option value="2">Tiềm Năng II</option>
                    <option value="3">Tiềm Năng III</option>
                </select>    
            </div>
        </td>
    </tr>
    <tr>
        <td style="text-align: left">
            <div id="cuslist" style="max-height: 600px;overflow: auto;"> 

            </div>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <input type="text" id="txt_title" class="classic-input" placeholder="Tiêu đề thư giới thiệu sản phẩm" style="width:98%"/>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div style="position: relative">
                <div id='jqxWidget-groupbutton' style="padding-left: 4px;position: relative">
                    <button style="padding:4px 16px;" id="mailview">
                        Xem Nội Dung Thư</button>
                    <button style="padding:4px 16px;" id="sendmailtest">
                        Gửi Thử</button>
                    <button style="padding:4px 16px;" id="sendmails">
                        Bắt Đầu Gửi Thư Cho Danh Sách Khách Hàng</button>
                </div>
                <div class="jfk-bubble jfk-bubble-promo sendtome" style="visibility: visible; left: 44px; bottom: 32px; opacity: 1;display: none ">
                    <div class="jfk-bubble-content-id">
                        <div class="promo-content" style="width: 200px; ">
                            <input class="classic-input txt-email-test" type="text" placeholder="Email của bạn" style="width: 180px"/>
                            <br><br>
                            <a id="btn-send1" href="javascript:testmail();">Gửi</a>&nbsp;|&nbsp;
                            <a href="javascript:$('.sendtome').hide();" onclick="">Hủy</a>
                        </div>
                    </div>
                    <div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowdown" style="left: 114px">
                        <div class="jfk-bubble-arrowimplbefore"></div>
                        <div class="jfk-bubble-arrowimplafter"></div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</table>
<div id="dm"></div>

<div id="jqxWindow-mailview">
    <div id="windowHeader-mailview">
        <span style="line-height: 20px">
            Nhập email cần gửi thư giới thiệu sản phẩm
        </span>
    </div>
    <div style="overflow: auto;" id="windowContent-mailview">
        <input type="text" style="margin: 0 0 8px 0;padding: 4px 0;width: 200px;" />
        <input type="button" class="classic-btn" value="Gửi" style="width: 200px"/>
    </div>
</div>
<div style="text-align: left">

    <pre>


Chú ý:
    Các bước gửi thư.
        1. Chọn sản phẩm cần gửi(có thể chọn nhiều sản phẩm).
        2. Xem trước nội dung thư.
        3. Gửi thử vào E mail cố định(kiểm tra có hoạt động hay ko).
        4. Chọn danh sách khách hàng.
        5. Gửi thư đến danh sách khách hàng đã chọn.

    Mỗi ngày chỉ gửi một thư cho các khách hàng.
    Thư được gửi theo chế độ Thread in script.
    Mỗi Thread gửi cho 50 khách hàng, Thread sau đó được tếp tục sau 5 giây.


    </pre>

</div>